<template>
  <div class="note" :style="note">
    <!-- <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <p class="hunter">人事管理系统</p>
        </div>
      </el-col>
    </el-row> -->
      <el-tabs type="border-card" class="tabs">
            <el-tab-pane label="登录">
              <el-form
                  :rules="rules"
                  ref="loginForm"
                  v-loading="loading"
                  element-loading-text="正在登录..."
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)"
                  :model="loginForm"
                  class="loginContainer">
                <el-form-item prop="id">
                  <el-input size="normal" type="text" v-model="loginForm.id"
                            placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input size="normal" type="password" v-model="loginForm.password"
                            placeholder="请输入密码"></el-input>
                </el-form-item>
                <!--            <el-form-item prop="code">-->
                <!--                <el-input size="normal" type="text" v-model="loginForm.code" auto-complete="off"-->
                <!--                          placeholder="点击图片更换验证码" @keydown.enter.native="submitLogin" style="width: 250px"></el-input>-->
                <!--                <img :src="vcUrl" @click="updateVerifyCode" alt="" style="cursor: pointer">-->
                <!--            </el-form-item>-->
<!--                <el-checkbox size="normal" class="loginRemember" v-model="checked"></el-checkbox>-->
                <tr>
                  <td class="login-title" style="justify-content: center">
                    身份
                  </td>
                  <td>
                    <el-radio v-model="type" :label="1" border>总裁</el-radio>
                    <el-radio v-model="type" :label="2" border>主管</el-radio>
                    <el-radio v-model="type" :label="3" border>员工</el-radio>
                  </td>
                </tr>
                <Vcode :show="isShow" @success="success" @close="close"></Vcode>
                <el-button-group style="width: 100%">
                  <el-button size="normal" type="danger" style="width: 50%;" @click="submit" :round="true" :disabled="right">人机验证</el-button>
                  <el-button size="normal" type="primary" style="width: 50%;" @click="submitLogin" :round="true" :disabled="!right">登录</el-button>
                </el-button-group>

              </el-form>
            </el-tab-pane>
          </el-tabs>   
  </div>
</template>

<script>

import {Message} from "element-ui";
import Vcode from 'vue-puzzle-vcode'

export default {
  name: "Login",
  data() {
    return {
      isShow : false,
      right : false,
      title : '加入我们',
      dialogAddVisible : false,
      post_type_options : [],
      bannerHeight : "",
      note: {
        backgroundImage: "url(" + require("../assets/images/demo6.jpeg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "auto auto",
        backgroundSize: "100% 100%",
        height: "100%",
        width: "100%",
        position: "fixed",
        marginTop: "5px",
      },
      loading: false,
      type: 1,
      vcUrl: '/verifyCode?time='+new Date(),
      loginForm: {
        id: '',
        password: '',
        employee_type: localStorage.getItem("role"),
      },
      checked: true,
      rules: {
        id: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
      }
    }
  },
  components : {
    Vcode
  },
  created() {
    this.loginForm.employee_type = this.type;
  },
  mounted(){
    // this.imgLoad();
    window.addEventListener('resize',() => {
      this.bannerHeight=this.$refs.bannerHeight[0].hight;
      this.imgLoad();
    },false)
    this.initDepartment();
    this.initPost();
  },
  methods: {
    updateVerifyCode() {
      this.vcUrl = '/verifyCode?time='+new Date();
    },
    submit () {
      this.isShow = true;
    },
    submitLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          // type:1是老板 2是主管 3是员工
          let str = '';
          if (this.type == 1) {
            str = '总裁';
          } else if (this.type == 2) {
            str = '主管';
          } else {
            str = '员工';
          }
          localStorage.setItem("type", str);//设置登录人员的身份
          localStorage.setItem("id", this.loginForm.id);
          if (str === '总裁' || str === '主管' || str === '员工') {
            localStorage.setItem("role", str);//设置登陆角色
            this.loginForm.employee_type = str;
            console.log("loginForm.type = ", this.loginForm.employee_type);
            console.log("即将提交的信息：", this.loginForm);

            this.$axios.post('/AdminLogin', this.loginForm).then((resp) => {
              this.loading = false;
              const _this = this;
              console.log("resp = ", resp.data)
              if (resp) {
                if (resp.data.msg == "登录成功") {
                  console.log("222")
                  this.$store.commit("INIT_CURRENTHR", resp.data.data);
                  console.log("333")
                  window.sessionStorage.setItem("user", JSON.stringify(resp.data.data));
                  console.log("存储的数据："+JSON.stringify(resp.data.data));
                  let path = this.$route.query.redirect;
                  this.$router.replace((path == '/' || path == undefined) ? '/home' : path);
                  _this.$router.push({path : '/home', query : _this.loginForm})
                } else {
                  Message.error({message: resp.data.msg})
                }
              } else {
                this.vcUrl = '/verifyCode?time='+new Date();
              }
            })
          }

        } else {
          return false;
        }
      });
    },
    imgLoad(){
      this.$nextTick(()=>{
        this.bannerHeight=this.$refs.bannerHeight[0].height;
        console.log(this.$refs.bannerHeight[0].height);
        // document.getElementsByClassName拿到的是数组并非某一个对象
        var testH=document.getElementById("test-div");
        // testH.style.height= this.bannerHeight+'px'; //报错
      })
    },
    joinUs() {
      this.dialogAddVisible = true;
    },
    resetForm(data) {
      this.$nextTick(() => {
        this.$refs['talentForm'].resetFields();
      })
    },
    changeEditSelect() {
      // 清空部门内容
      this.emp.post_name = ''

      // 遍历部门的下拉选项数组
      for (const k in this.department_names) {
        // 岗位名称 是否等于 部门名称的下拉选择数组中的某一项
        if (this.emp.department_name === this.department_names[k]) {
          this.post_type_options = this.post_names[this.emp.department_name]
        }
      }
      console.log("post_type_options = "+this.post_type_options);
    },
    doAddTalent() {
      this.$refs['talentForm'].validate(valid => {
        if (valid) {
          console.log(this.emp);
          this.emp.height = parseInt(this.emp.height);
          this.$axios.post('/TalentPool/Add', this.emp).then(resp => {
            if (resp) {
              this.dialogAddVisible = false;
              if (resp) {
                Message.success({message : resp.data.msg});
              } else {
                Message.error({message : resp.data.msg})
              }
            } else {
              Message.error({message : resp.data.msg});
            }
          })
        }
      });
    },
    success() {
      this.isShow = false;
      this.right = true;
    },
    close() {
      this.isShow = false;
      this.right = false;
    },
    initDepartment() {
      this.$axios.post('/Department/Init').then(resp => {
        this.department_names = resp.data;
        console.log("初始化部门：", this.department_names);
      })
    },
    initPost() {
      var temp = {
        "department_name" : this.department_name
      }
      this.$axios.post('/Post/Init', temp).then(resp => {
        this.post_names = resp.data;
        console.log("初始化岗位：", this.post_names);
      })
    }
  }
}
</script>

<style>
.tabs {
  text-align: center;
  top: 30%;
  left: 30%;
  position:absolute;
    /*定位方式绝对定位absolute*/
    /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
  width: 500px;
  padding: 15px 35px 15px 35px;
  background: #fff;
  box-sizing: border-box;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  border-radius:15px;
    /*边框圆角，四个角均为15px*/
}
.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: auto auto;
  width: 400px;
  padding: 15px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.loginTitle {
  margin: 15px auto 20px auto;
  text-align: center;
  color: #505458;
}
.login-title {
  text-align: center;
  margin: 0 auto auto auto;
  color: #303133;
}

.loginRemember {
  text-align: left;
  margin: 0px 0px 15px 0px;
}
.el-form-item__content{
  display: flex;
  align-items: center;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  /*margin: 0;*/
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.carousel {
  margin: 0px auto;
}
.font {
  font-family : 华文行楷;
  color: #aa0fe3;
  text-align: center;
  font-size: 30px;
}
.font2 {
  font-family : "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: #0fb9e3;
  text-align: center;
  font-size: medium;
}
.hunter {
  font-family : 幼圆;
  letter-spacing : 50px;
  color: #ff0000;
  text-align: center;
  font-size: 50px;
  font-weight: bolder;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.joinUs {
  font-family: 华文隶书;
  color: #600fe3;
  font-size: larger;
}
</style>
